<template>
    <div>
        <el-row :style="{ marginBottom: '10px' }" :gutter="10">
            <el-col :span="1.5">
                <el-button type="warning" @click="handleApproveBatchApply" :disabled="multipleSelection.length == 0" icon="el-icon-check" size="mini">批量审批</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" @click="getList" icon="el-icon-refresh" size="mini">手动刷新任务</el-button>
            </el-col>
        </el-row>

        <el-table v-loading="loading" :data="list" border @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="演练计划标题" align="center" prop="planTitle" />
            <el-table-column label="演练日期" align="center" prop="planDate" width="180"> </el-table-column>
            <el-table-column label="演练地点" align="center" prop="planLocation" />
            <el-table-column label="创建单位" align="center" prop="deptName" />
            <el-table-column label="创建人员" align="center" prop="createUserName"> </el-table-column>
            <el-table-column label="计划状态" align="center" prop="drillStatus">
                <template slot-scope="scope">
                    <template v-if="scope.row.createUser == userId">
                        <div v-if="scope.row.approveStatus == 3">
                            <el-tag v-if="scope.row.status == 0" size="mini">未执行</el-tag>
                            <el-tag type="warning" v-if="scope.row.status == 1" size="mini">演练中</el-tag>
                            <el-tag type="success" v-if="scope.row.status == 2" size="mini">已结束</el-tag>
                        </div>
                        <div v-else>
                            <el-tag v-if="scope.row.approveStatus == 0" size="mini">未审批</el-tag>
                            <el-tag type="warning" v-if="scope.row.approveStatus == 1" size="mini">待审批</el-tag>
                            <el-tag type="success" v-if="scope.row.approveStatus == 2" size="mini">未发布</el-tag>
                        </div>
                    </template>
                    <template v-else>
                        <el-tag type="warning" v-if="scope.row.approveStatus == 1" size="mini">待审批</el-tag>
                        <el-tag type="success" v-if="scope.row.approveStatus == 2" size="mini">未发布</el-tag>
                        <el-tag type="info" v-if="scope.row.approveStatus == 3" size="mini">已发布</el-tag>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="handleDetail(scope.row)">详情</el-button>
                    <el-button size="mini" type="text" v-if="scope.row.approveStatus == 1" @click="handleApproveApply(scope.row)">审批</el-button>
                    <el-button size="mini" type="text" v-if="scope.row.approveStatus == 2" @click="handlePublish(scope.row)">发布</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
</template>

<script>
import { getApprovePlanList, approveDrillPlan, approveBatchDrillPlan } from "@/api/drill/drill.js";
import * as Auth from "@/utils/auth";

export default {
    name: "DrillPlan",
    dicts: ["eventlevelcode_dict", "drillcate_dict", "drilltype_dict"],
    components: {},
    data() {
        return {
            // 遮罩层
            loading: false,
            // 总条数
            total: 10,
            // 应急演练计划表格数据
            list: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                createUser: 0,
            },
            userId: 0,
            multipleSelection: [],
        };
    },
    created() {
        // 获取用户ID
        this.userId = Auth.getUserId();
        this.getList();
    },
    methods: {
        getList() {
            getApprovePlanList(this.userId, this.queryParams).then(res => {
                this.list = res.rows;
                this.total = res.total;
            });
        },
        handleDetail(data) {
            this.$tab.openPage("演练计划详情", "/drill/drillDetail", { planId: data.planId });
        },
        handleApproveApply(row) {
            // 询问是通过审核还是拒绝
            this.$confirm("是否通过该演练计划的审批?", "提示", {
                confirmButtonText: "通过审批",
                cancelButtonText: "退回申请",
                distinguishCancelAndClose: true,
                type: "warning",
                beforeClose: (action, instance, done) => {
                    if (action == "cancel") {
                        approveDrillPlan(row.planId, { apply: false }).then(res => {
                            if (res.code == 200) {
                                this.$message({
                                    type: "success",
                                    message: "退回成功",
                                });
                                this.getList();
                            }
                        });
                    }
                    if (action == "confirm") {
                        approveDrillPlan(row.planId, { apply: true }).then(res => {
                            if (res.code == 200) {
                                this.$message({
                                    type: "success",
                                    message: "通过成功",
                                });
                                this.getList();
                            }
                        });
                    }
                    done();
                },
            });
        },
        handleApproveBatchApply() {
            let ids = [];
            this.multipleSelection.forEach(item => {
                ids.push(item.planId);
            });
            // 询问是通过审核还是拒绝
            this.$confirm(`是否通过已选中的${this.multipleSelection.length}条演练计划的审批?`, "提示", {
                confirmButtonText: "通过审批",
                cancelButtonText: "退回申请",
                distinguishCancelAndClose: true,
                type: "warning",
                beforeClose: (action, instance, done) => {
                    if (action == "cancel") {
                        approveBatchDrillPlan({ planId: ids, apply: false }).then(res => {
                            if (res.code == 200) {
                                this.$message({
                                    type: "success",
                                    message: "退回成功",
                                });
                                this.getList();
                            }
                        });
                    }
                    if (action == "confirm") {
                        approveBatchDrillPlan({ planId: ids, apply: true }).then(res => {
                            if (res.code == 200) {
                                this.$message({
                                    type: "success",
                                    message: "通过成功",
                                });
                                this.getList();
                            }
                        });
                    }
                    done();
                },
            });
        },
        handleSelectionChange(rows) {
            this.multipleSelection = rows;
        },
    },
};
</script>
<style lang="scss" scoped></style>
